<template>
	<view>
		<u-navbar placeholder title="我的" bgColor="transparent" show>
			<view slot="left" class="u-nav-slot flex"></view>
		</u-navbar>
		</u-navbar>
		<view style="position: absolute;top: 0;left: 0;right: 0;">
			<image src="../../static/index/min-bg.png" mode="" style="width: 100%;"></image>
		</view>
		<view style="position: relative;top: 0rpx;">
			<view class="wid100 box-b" style="padding: 46rpx 30rpx 72rpx 30rpx;">
				<view v-if="!user" class="user-msg" @tap="login">
					<image class="user-photo" src="../../static/activityDetail/9192x.png"></image>
					<view class="name-msg">
						<view class="name">登陆/注册</view>
						<view class="phone">登陆/注册可解锁完整功能</view>
					</view>
				</view>
				<button v-else  class="topbtn" @tap="jump({url:'/pages/meInfo/meInfo?type=1'})">
					<view class="user-msg">
							<image class="user-photo" :src="avatar"></image>
							<view class="name-msg">
								<view class="name">{{nickName}}</view>
								<view class="phone">{{phone}}</view>
							</view>
					</view>
				</button>
			</view>

			<view class="wid100 bg-white" style="border-radius: 52rpx 52rpx 0px 0px;min-height: 750rpx;">
				<view class="box-b px-5">
					<view class="flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;" @tap="toPushbuy">
						<view class="flex align-center">
							<image src="../../static/index/pf.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">我的拼房</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</view>

					<view class="flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;" @tap="toRobRooms">
						<view class="flex align-center">
							<image src="../../static/index/qf.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">我的抢房</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</view>

					<view class="flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;" @tap="toApply">
						<view class="flex align-center">
							<image src="../../static/index/sq.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">我的申请</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</view>

					<button open-type="contact" class="kefu flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;">
						<view class="flex align-center">
							<image src="../../static/index/kh.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">联系客服</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</button>
					
					<view class="flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;" @tap="jump({url:'/pages/fwxy/fwxy'})">
						<view class="flex align-center">
							<image src="../../static/common/fwxy.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">服务协议</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</view>
					
					<view class="flex-1 flex align-center justify-between border-bottom-f9" style="height: 120rpx;" @tap="jump({url:'/pages/yszc/yszc'})">
						<view class="flex align-center">
							<image src="../../static/common/yszc.png" style="width:30rpx;height:30rpx;" mode="">
							</image>
							<text class="font-28 fw4 ml-2">隐私政策</text>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
					</view>

				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 40rpx;width: 100%;text-align: center;">
			<image src="../../static/index/min-log.png" mode="" style="width: 200rpx;height: 200rpx;"></image>
		</view>
		<LoginPop></LoginPop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				nickName: uni.getStorageSync('userInfo').nickname,
				phone: uni.getStorageSync('userInfo').mobile,
				avatar: uni.getStorageSync('userInfo').avatar
			}
		},
		onShow() {
			console.log('onshow啦')
			setTimeout(()=>{
				this.nickName = uni.getStorageSync('userInfo').nickname
				this.avatar = uni.getStorageSync('userInfo').avatar
			},800)
			
		},
		computed: {
			...mapState({
				user: state => state.user
			})
		},
		watch: {
			user() {
				if (this.user) {
					this.nickName = uni.getStorageSync('userInfo').nickname
					this.phone = uni.getStorageSync('userInfo').mobile
					this.avatar = uni.getStorageSync('userInfo').avatar
				}
			}
		},
		methods: {
			//我的申请
			toApply(){
				if(!uni.getStorageSync('userInfo')) return this.$store.commit('openPop')
				uni.navigateTo({
					url:'/pages/min/myApply'
				})
			},
			//我的拼房
			toPushbuy(){
				if(!uni.getStorageSync('userInfo')) return this.$store.commit('openPop')
				uni.navigateTo({
					url:'/pages/min/myPushbuy'
				})
			},
			toRobRooms(){
				if(!uni.getStorageSync('userInfo')) return this.$store.commit('openPop')
				uni.navigateTo({
					url:'/pages/min/robRooms'
				})
			},
			//登录
			login() {
				this.$store.commit('openPop')
			}
		}
	}
</script>

<style lang="scss">
	button::after{
	 	border: none;
	}
	.topbtn{
		background: none;
		padding: 0;
		margin: 0;
		line-height: 1.5;
	}
	.kefu{
		
		background-color: #fff;
		padding-left:0;
		padding-right: 0;

		}
	.user-msg {
		display: flex;
		align-items: center;

		.photoView {
			width: 132rpx;
			height: 132rpx;
			background: linear-gradient(180deg, #FEE9E2 4%, #FDBFA6 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 40rpx;
			border-radius: 50%;
		}

		.user-photo {
			width: 118rpx;
			height: 118rpx;
			border-radius: 50%;
		}

		.name-msg {
			margin-left: 18rpx;

			.name {
				font-size: 40rpx;
				font-weight: 500;
				color: #242424;
			}

			.phone {
				font-size: 28rpx;
				font-weight: 400;
				color: #505050;
			}
		}
	}
</style>
